By

文章目录

翻译自Perspective Boxes

相信与否，这个盒子动画是用纯CSS3变换实现的。立方体使用不同的颜色和类很容易渲染出来。

使用循环关键帧动画来给这些盒子在3D空间中产生弹起的幻觉。通过单击右上角的任何透视按钮，你甚至可以从不同的角度查看此3D模型。很酷！

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="radio" id="left" name="rotate">
<label for="left">Left</label>
<input type="radio" id="reset" name="rotate" checked>
<label for="reset">Reset</label>
<input type="radio" id="right" name="rotate">
<label for="right">Right</label>
<input type="radio" id="up" name="rotate">
<label for="up">Up</label>
<input type="radio" id="down" name="rotate">
<label for="down">Down</label>
<div class="perspective">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
body {
    font-size: 100%;
}
.perspective {
	background-image: 
	linear-gradient(
		/*从上到下画渐变*/
		/*起始点透明度为0.1，画到2.5%的高度*/
		hsla(0,0%,0%,.1) 2.5%, 
		/*从2.5%到97.5%的高度颜色为透明*/
		transparent 2.5%, 
		transparent 97.5%, 
		/*从97.5%的高度以透明度为0.1到100%的高度透明度渐变*/
		hsla(0,0%,0%,.1) 97.5%),
	/*从左往右的透明度渐变*/
	linear-gradient(90deg, hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%);
	/*以3*3的大小重复图片*/
	background-size: 3em 3em;
	/*box-shadow: h-shadow v-shadow blur spread color inset;*/
	/*h-shadow	必需。水平阴影的位置。允许负值
	v-shadow	必需。垂直阴影的位置。允许负值
	blur	可选。模糊距离
	spread	可选。阴影的尺寸
	color	可选。阴影的颜色
	inset	可选。将外部阴影 (outset) 改为内部阴影。*/
	box-shadow: 0 0 0 .25em hsla(0,0%,0%,.2);
    height: 9em;
    width: 9em;
    /*水平垂直居中*/
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -7.5em;
    /*外围一层3*3的大小*/
    padding: 3em;
    transform: perspective(500px)/*为 3D 转换元素定义透视视图*/ rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;/*子元素将保留其 3D 位置*/
    transition: 1s;
}
.cube,/*顶面*/
.cube:before, /*右面*/
.cube:after /*左面*/
{
	width: 3em;
	height: 3em;
	float: left;
	position: absolute;
	/*四边形成边框阴影*/
	box-shadow: inset 0 0 0 .25em hsla(0,0%,0%,.1);
	content: '';
}
.cube /*顶面*/
{
	background: #f66;
	/*覆盖原有的position:absolute,平铺成9个方块*/
	position: relative;
	transform: rotateZ(0deg) 
	/*距离底面3em高度*/
	translateZ(3em);
	transform-style: preserve-3d;
	transition: .25s;
}
.cube:after /*左面*/
{
	background-color: #e55;
	transform: rotateX(-90deg) translateY(3em);
	/*设置旋转元素的基点位置
	语法：transform-origin: x-axis y-axis z-axis;
	值						描述
	x-axis					定义视图被置于 X 轴的何处。可能的值：
	left
	center
	right
	length
	%
	y-axis					定义视图被置于 Y 轴的何处。可能的值：
	top
	center
	bottom
	length
	%
	z-axis					定义视图被置于 Z 轴的何处。可能的值：
	length
	*/
	transform-origin: 100% 100%;
}
/*右面*/
.cube:before {
	background-color: #d44;
	transform: rotateY(90deg) translateX(3em);
	transform-origin: 100% 0;
}
/*至此已形成3个面*/
/* 改变背景颜色 */
.cube:nth-child(even) {
    background-color: #fc6;
}
.cube:nth-child(even):after {
    background-color: #eb5;
}
.cube:nth-child(even):before {
    background-color: #da4;
}
/*动画*/
@keyframes wave {
	50% {
		transform: translateZ(4.5em);
	}
}
.cube:nth-child(1) {
	/*
	语法：animation: name duration timing-function delay iteration-count direction;
	值							描述
	animation-name				规定需要绑定到选择器的 keyframe 名称。。
	animation-duration			规定完成动画所花费的时间，以秒或毫秒计。
	animation-timing-function	规定动画的速度曲线。
	animation-delay				规定在动画开始之前的延迟。
	animation-iteration-count	规定动画应该播放的次数。
	animation-direction			规定是否应该轮流反向播放动画。
	*/
	animation: wave 2s .1s ease-in-out infinite;
}
.cube:nth-child(2) {
	animation: wave 2s .2s ease-in-out infinite;
}
.cube:nth-child(3) {
	animation: wave 2s .3s ease-in-out infinite;
}
.cube:nth-child(4) {
	animation: wave 2s .4s ease-in-out infinite;
}
.cube:nth-child(5) {
	animation: wave 2s .5s ease-in-out infinite;
}
.cube:nth-child(6) {
	animation: wave 2s .6s ease-in-out infinite;
}
.cube:nth-child(7) {
	animation: wave 2s .7s ease-in-out infinite;
}
.cube:nth-child(8) {
	animation: wave 2s .8s ease-in-out infinite;
}
.cube:nth-child(9) {
	animation: wave 2s .9s ease-in-out infinite;
}
/*上下左右按钮*/
input {
	display: none;
}
label {
	background: #ddd;
	cursor: pointer;
	display: block;
	font-family: sans-serif;
	width: 4.5em;
	line-height: 3em;
	text-align: center;
	position: absolute;
	right: .5em;
	top: 4em;
	transition: .25s;
}
label[for="left"] {
    right: 10.5em;
}
label[for="reset"] {
    right: 5.5em;
}
label[for="up"] {
    right: 5.5em;
    top: .5em;
}
label[for="down"] {
    right: 5.5em;
    top: 7.5em;
}
label:hover {
    background-color: #bbb;
}
input:checked + label {
    background-color: #666;
    color: #fff;
}
#left:checked ~ .perspective {
    transform: perspective(500px) rotateX(45deg) rotateZ(75deg);
}
#right:checked ~ .perspective {
    transform: perspective(500px) rotateX(45deg) rotateZ(15deg);
}
#up:checked ~ .perspective {
    transform: perspective(500px) rotateX(75deg) rotateZ(45deg);
}
#down:checked ~ .perspective {
    transform: perspective(500px) rotateX(15deg) rotateZ(45deg);
}​
文章目录